<template>
  <el-input
      v-model="inputValue"
      :placeholder="placeholder"
      class="bottom-border-input"
      :style="{ width: width }"
      v-bind="$attrs"
  ></el-input>
</template>

<script>
export default {
  name: 'BottomBorderInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%' // 默认宽度为 100%
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

<style scoped>
.bottom-border-input {
  width: 100%; /* 默认宽度 */
  font-size: 14px;
  line-height: 16px;
}

/* 自定义样式：只保留底部边框 */
.bottom-border-input >>> .el-input__inner {
  border: none; /* 去掉所有边框 */
  border-bottom: 1px solid #dcdfe6; /* 只保留底部边框 */
  border-radius: 0; /* 去掉圆角 */
  padding: 0; /* 去掉内边距 */
  background: transparent; /* 去掉背景色 */
  box-shadow: none; /* 去掉阴影 */
}

/* 鼠标悬停时底部边框变色 */
.bottom-border-input >>> .el-input__inner:hover {
  /*border-bottom: 1px solid #409eff;*/
  /*border-bottom-color: #409eff;*/
}

/* 输入框聚焦时底部边框变色 */
.bottom-border-input >>> .el-input__inner:focus {
  border-bottom: 1px solid #409eff;
}
</style>
